<template>
   <div class="farmerlist">
       <h4>供货商列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
            <div style="margin-bottom:14px;">
                    <div class="demo-input-suffix" style="width:255px;display:inline-block;">
                        昵称：
                        <el-input
                            placeholder="请输入昵称"
                            clearable
                            v-model="nickName" class="filter-input"
                            @keyup.enter.native="search_farmer()">
                        </el-input>
                    </div>
                    <div class="demo-input-suffix" style="width:270px;display:inline-block;">
                        真实姓名：
                        <el-input clearable
                            placeholder="请输入真实姓名"
                            v-model="realName" class="filter-input"
                            @keyup.enter.native="search_farmer()">
                        </el-input>
                    </div>
                    <div class="demo-input-suffix" style="width:270px;display:inline-block;">
                        手机号：
                        <el-input clearable
                            placeholder="请输入手机号"
                            v-model="tel" class="filter-input"
                            @keyup.enter.native="search_farmer()">
                        </el-input>
                    </div>
                    <!-- <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                        所属城市：
                        <el-select v-model="value8" filterable placeholder="请选择省" style="width:100px;height: 22px;margin-left:10px;">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select> 
                        <el-select v-model="value8" filterable placeholder="请选择市" style="width:100px;height: 22px;margin-left:10px;">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select> 
                    </div> -->
                    <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                        养殖基地：
                        <el-select v-model="base" clearable placeholder="请选择养殖基地">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.baseName"
                                    :value="item.id">
                                </el-option>
                        </el-select>
                    </div>
            </div>
            <div>
                    <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                        注册时间：
                        <el-date-picker
                                    v-model="registerTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd"
                                    style="width:308px;">
                        </el-date-picker>
                    </div>
                    <div class="demo-input-suffix" style="width:300px;display:inline-block;">
                        认证状态：
                        <el-select clearable v-model="status" placeholder="请选择">
                                <el-option
                                v-for="item in statusOpt"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                        </el-select>
                    </div>
                    <div class="demo-input-suffix" style="display:inline-block;">
                        认证时间：
                        <el-date-picker
                                    v-model="approveTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd"
                                    style="width:308px;">
                        </el-date-picker>
                    </div>
                    <el-button type="primary" style="margin-left:20px;" @click="search_farmer()">搜索</el-button>
            </div>
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px;">
           <!-- <div style="overflow:hidden">
              <div style="float:left;"></div>
              <el-button type="danger"  style="float:right;margin-bottom:20px;">导出(勾选)</el-button>
           </div> -->
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column  type="index"  width="50" label="序号" align="center"  :index="formatter"></el-table-column>
                 <el-table-column prop="farmName" label="昵称" width="70" align="center"></el-table-column>
                 <el-table-column prop="realName" label="真实姓名" width="70" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="手机号" width="90" align="center"></el-table-column>
                <el-table-column prop="farmerAddress" label="所属城市" align="center"  width="200">
                </el-table-column>
                 <el-table-column prop="baseName" label="所属养殖基地" align="center" width="100">
                </el-table-column>
                 <el-table-column prop="status" label="认证状态" align="center" width="110" :formatter="formatterStatus">
                </el-table-column>
                 <el-table-column prop="addTime" label="注册时间" align="center" width="170">
                </el-table-column>
                 <el-table-column prop="operateTime" label="认证时间" align="center" width="170">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="lookDetail( scope.row.id,scope.row.status )">详情</el-button>
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <!-- <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;"
                    @current-change="getCurrentPage">
                </el-pagination> -->
                <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
           </div>
      </div>
  </div>  
</template>

<script>
import { farmer_base,farmerList } from '@/request/api'
export default {
    data(){
        return {
            loading:true,
           data: [],
           statusOpt: [{
                        value: '0',
                        label: '未认证'
                     }, 
                     {
                        value: '1',
                        label: '已申请'
                      }, 
                      {
                        value: '2',
                        label: '未通过'
                     }, 
                     {
                        value: '3',
                        label: '已认证'
                     }   
            ],
            options: [],  // 养殖基地
            value: '',
            input2:'' ,
            pageNum:1,//当前页
            pageSize:10,//每页显示的条数
            total:0,
            nickName:'',  // 昵称
            realName:'',  // 真实姓名
            tel:'',       // 手机号
            base:'',     // 养殖基地所在地 select
            registerTime:'', // 注册时间 一段时间短 开始 结束 
            status:'',      // 认证状态 
            approveTime:'' , // 认证时间段 
            value8:''
        }     
    },
    created(){
       this.get_farmer_base();
       this.get_farmerList();
    },
    methods:{
      formatterStatus(row,column) {
           let str;
          if(row.status == 1) {
             str = '已申请'
          }else if(row.status == 2) {
              str = '未通过'
          }else if(row.status == 3) {
              str = '已认证'
          }else if(row.status == 0) {
              str = '未认证'
          }
          return str;
            
      },
      formatter(row, column ) {
            return  this.pageSize*(this.pageNum-1) + 1 + row;
      },
      //当前页
      getPageNum:function(currentPage){
         this.pageNum = currentPage;
         this.get_farmerList();
      },
      //当前页的条数
      handleSizeChange(currentPage){
         this.pageSize = currentPage;
         this.get_farmerList();
      },
      lookDetail(id,status){
          this.$router.push({
              path:`/farmerlist/farmer_detail/${id}`,
              query:{
                  status:status
              }

          })
      },
      search_farmer(){
          console.log(this.approveTime);
          this.get_farmerList();
      },
      get_farmer_base(){
          farmer_base({}).then(res=> {
              this.options = res.data;
          })
      },
      get_farmerList(){
          farmerList({
              realName:this.realName,
              tel:this.tel,
              farmName:this.nickName,
              status:this.status,
              startAddTime: (this.registerTime && this.registerTime[0] ) || '',
              endAddTime:  (this.registerTime && this.registerTime[1]) || '',
              startAuthTime: ( this.approveTime && this.approveTime[0] ) || '',
              endAuthTime:  (this.approveTime && this.approveTime[1]) || '',
              baseName:this.base,
              pageSize:this.pageSize,
              pageNum:this.pageNum
          }).then( res => {
              console.log(res);
              this.loading = false;
              this.total = res.total;
              this.data = res.rows;
          })
      }
    }
 }
</script>
<style  scoped>
.farmerlist {
        width:100%;
        height: 100%;
}
.farmerlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}


</style>